<script>
import * as echarts from 'echarts';

export default {
  name: 'RightTop',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('weather-chart');
      const myChart = echarts.init(chartDom);

      // 天气图标路径
      const weatherIcons = {
        Sunny: 'path/to/sunny_icon.png',  // 需要替换为实际的图标路径
        Cloudy: 'path/to/cloudy_icon.png',
        Rainy: 'path/to/rainy_icon.png'
      };

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['晴天', '多云', '雨天'],
          textStyle: {
            color: '#00ffd9'
          }
        },
        grid: {
          left: 100,
          top: 30,
          right: 50,
          bottom: 30
        },
        xAxis: {
          type: 'value',
          name: '天数',
          axisLabel: {
            color: '#00ffd9'
          },
          axisLine: {
            lineStyle: {
              color: '#00ffd9'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 255, 217, 0.1)'
            }
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          data: ['晴天', '多云', '雨天'],
          axisLabel: {
            color: '#00ffd9',
            formatter: function (value) {
              return '{' + value + '| }\n{value|' + value + '}';
            },
            margin: 20,
            rich: {
              value: {
                lineHeight: 30,
                align: 'center',
                color: '#00ffd9'
              },
              晴天: {
                height: 30,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.Sunny
                }
              },
              多云: {
                height: 30,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.Cloudy
                }
              },
              雨天: {
                height: 30,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.Rainy
                }
              }
            }
          },
          axisLine: {
            lineStyle: {
              color: '#00ffd9'
            }
          }
        },
        series: [
          {
            name: '本月',
            type: 'bar',
            data: [15, 8, 7],
            label: {
              show: true,
              color: '#00ffd9'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(0, 255, 217, 0.3)' },
                { offset: 1, color: 'rgba(0, 255, 217, 0.8)' }
              ])
            }
          },
          {
            name: '上月',
            type: 'bar',
            data: [12, 10, 8],
            label: {
              show: true,
              color: '#00ffd9'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
                { offset: 1, color: 'rgba(255, 107, 107, 0.8)' }
              ])
            }
          }
        ]
      };

      myChart.setOption(option);

      // 监听窗口大小变化
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
};
</script>

<template>
  <div class="right-top">
    <dv-border-box-9 :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
      <div class="content-wrapper">
        <div class="header">
          <div class="title-container">
            <dv-decoration3 class="decoration-left" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
            <dv-border-box-2 class="title-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
              <div class="title">天气统计数据</div>
            </dv-border-box-2>
            <dv-decoration3 class="decoration-right" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
          </div>
        </div>
        <div id="weather-chart"></div>
      </div>
    </dv-border-box-9>
  </div>
</template>

<style scoped>
.right-top {
  width: 100%;
  height: 100%;
}

.content-wrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 28, 36, 0.5);
  padding: 16px;
  border-radius: 4px;
}

.header {
  width: 100%;
  margin-bottom: 8px;
}

.title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-box {
  width: fit-content;
  height: 40px;
  padding: 0 30px;
}

.title {
  color: #00ffd9;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 10px;
  line-height: 40px;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.decoration-left,
.decoration-right {
  width: 105px;
  height: 20px;
}

#weather-chart {
  width: 100%;
  height: calc(100% - 48px);  /* 减去标题的高度 */
}
</style>